<template>
    <h1>评分模型</h1>
    <d-row class="docs-devui-row">
        <d-col :span="7"/>
        <d-col :span="10">
            <d-card v-show="!showScore">
                <d-form :data="jobForm" label-size="lg" label-align="'center">
                    <d-row class="docs-devui-row">
                        <d-col :span="12">
                            <d-form-item label="城市">
                                <d-select v-model="jobForm.citySelect" :options="cityNames"/>
                            </d-form-item>
                        </d-col>
                        <d-col :span="12">
                            <d-form-item field="select" label="学历">
                                <d-select v-model="jobForm.educationSelect" :options="educationNames"/>
                            </d-form-item>
                        </d-col>
                    </d-row>


                    <d-form-item label="技术栈">
                        <d-select class="mb-2" v-model="jobForm.techs"
                                  :options="techNames" :multiple="true"
                                  :collapse-tags="true" :collapse-tags-tooltip="true"/>
                    </d-form-item>

                    <d-form-item label="福利">
                        <d-select class="mb-2" v-model="jobForm.welfares"
                                  :options="welfareNames" :multiple="true"
                                  :collapse-tags="true" :collapse-tags-tooltip="true"/>
                    </d-form-item>


                    <d-row>
                        <d-col :span="12">
                            <d-form-item label="最低薪资(K)">
                                <d-input-number :min="0" :max="100" v-model="scoreBasis.salary_lower_limit"/>
                            </d-form-item>
                        </d-col>
                        <d-col :span="12">
                            <d-form-item label="最高薪资(K)">
                                <d-input-number :min="0" :max="100" v-model="scoreBasis.salary_upper_limit"/>
                            </d-form-item>
                        </d-col>
                    </d-row>


                    <d-row>
                        <d-col :span="12">
                            <d-form-item label="公司规模下限">
                                <d-input-number :min="0" :max="100000" v-model="scoreBasis.company_size_lower_limit"/>
                            </d-form-item>
                        </d-col>
                        <d-col :span="12">
                            <d-form-item label="公司规模上限">
                                <d-input-number :min="0" :max="100000" v-model="scoreBasis.company_size_upper_limit"/>
                            </d-form-item>
                        </d-col>
                    </d-row>

                    <d-row>
                        <d-col :span="12">
                            <d-form-item label="工作经验下限(年)">
                                <d-input-number :min="0" :max="30" v-model="scoreBasis.experience_lower_limit"/>
                            </d-form-item>
                        </d-col>
                        <d-col :span="12">
                            <d-form-item label="工作经验上限(年)">
                                <d-input-number :min="0" :max="30" v-model="scoreBasis.experience_upper_limit"/>
                            </d-form-item>
                        </d-col>
                    </d-row>

                    <d-form-operation>
                        <d-button @click="getScore" variant="solid">评分</d-button>
                    </d-form-operation>
                </d-form>
            </d-card>

            <div v-show="showScore">
                <d-button
                    variant="solid"
                    color="primary"
                    @click="showScore = false"
                    style="margin: 10px"
                >返回
                </d-button>
                <d-row :gutter="16">
                    <d-col :span="12">
                        <d-card>
                            <d-statistic :value-style="{ color: '#abf' }" title="评分"/>
                            <d-tag size="lg">{{ jobScore }}</d-tag>
                        </d-card>
                    </d-col>
                    <d-col :span="12">
                        <d-card>
                            <d-statistic :value-style="{ color: '#abf' }" title="评级"/>
                            <d-rate character="A" color="#ffa500" v-model="jobLevel" :count="10"/>
                        </d-card>
                    </d-col>
                </d-row>
            </div>
        </d-col>
        <d-col :span="7"/>
    </d-row>
</template>

<script>
import scoreData from "../score.js";
import axios from "axios";

export default {
    name: "ScoreModel",
    data() {
        return {
            showScore: false,
            jobScore: 0,
            jobLevel: 0,
            jobForm: {
                citySelect: '',
                educationSelect: '',
                techs: [],
                welfares: []
            },
            welfareNames: scoreData.welfare.map(w => w.welfare_name),
            techNames: scoreData.tech.map(tech => tech.tech_name),
            cityNames: scoreData.city.map(city => city.city_name),
            educationNames: scoreData.education.map(ed => ed.education_name),
            mappedTechOptions: new Map(scoreData.tech.map(t => [t.tech_name, t.tech_score])),
            mappedWelfareOptions: new Map(scoreData.welfare.map(w => [w.welfare_name, w.welfare_score])),
            mappedCityOptions: new Map(scoreData.city.map(city => [city.city_name, city.city_score])),
            mappedEducationOptions: new Map(scoreData.education.map(ed => [ed.education_name, ed.education_score])),
            educationOptions: [],
            scoreBasis: {
                salary_lower_limit: 3,
                salary_upper_limit: 10,
                experience_lower_limit: 0,
                experience_upper_limit: 5,
                company_size_lower_limit: 0,
                company_size_upper_limit: 100
            }
        }
    },
    methods: {
        calculatePercentage(numerator, denominator) {
            const percentage = Math.floor((numerator / denominator) * 100);
            const scaledPercentage = Math.min(Math.max(percentage, 0), 100);
            const scaledValue = (scaledPercentage / 10).toFixed(1);
            return Number(scaledValue);
        },
        getScore() {
            let jobScore = {
                ...this.scoreBasis,
                city_score: this.mappedCityOptions.get(this.jobForm.citySelect),
                education_score: this.mappedEducationOptions.get(this.jobForm.educationSelect),
                tech_score: this.jobForm.techs.reduce((score, cur) => score + this.mappedTechOptions.get(cur), 0),
                welfare_score: this.jobForm.welfares.reduce((score, cur) => score + this.mappedWelfareOptions.get(cur), 0),
            }
            console.log(jobScore)
            axios.post('http://152.136.191.171:9243/job/score', {
                ...jobScore
            }).then(resp => {
                this.jobLevel = Math.abs(resp.data.data.score * 10).toFixed(2);
                this.jobScore = this.jobLevel * 10;
                this.showScore = true;
            })
        }
    }
}
</script>

<style scoped>

</style>